<template>
	<div class="roadAnalysis-main">
		<i class="el-icon-close" @click="close"> </i>
		<input type="button" class="btn" id="default" value="开启测距" style="color: white" @click="initdistance" />
		<input type="button" class="btn" id="default" value="关闭测距" style="color: white" @click="deletedistance" />
	</div>
</template>

<script>
import { setCenterAndZoom, measure } from '@/gdMap/index'
export default {
	name: 'RoadAnalysis',
	data() {
		return {}
	},
	computed: {},
	mounted() {
		this.$nextTick(() => {
			setCenterAndZoom(119.208811, 36.454259, 13)
			this.initdistance()
		})
	},
	methods: {
		initdistance() {
			// var trafficLayer = new AMap.TileLayer.Traffic({
			// 	zIndex: 10
			// })
			// trafficLayer.setMap(window.gdMap)
			// trafficLayer.show()
			this.mouseTool = new AMap.MouseTool(window.gdMap)
			this.mouseTool.rule({
				// 起点
				startMarkerOptions: {
					// 可缺省
					icon: new AMap.Icon({
						size: new AMap.Size(19, 31), // 图标大小
						imageSize: new AMap.Size(19, 31),
						image: 'https://webapi.amap.com/theme/v1.3/markers/b/start.png'
					})
				},
				// 终点
				endMarkerOptions: {
					// 可缺省
					icon: new AMap.Icon({
						size: new AMap.Size(19, 31), // 图标大小
						imageSize: new AMap.Size(19, 31),
						image: 'https://webapi.amap.com/theme/v1.3/markers/b/end.png'
					}),
					offset: new AMap.Pixel(-9, -31)
				},
				// 经过点
				midMarkerOptions: {
					// 可缺省
					icon: new AMap.Icon({
						size: new AMap.Size(19, 31), // 图标大小
						imageSize: new AMap.Size(19, 31),
						image: 'https://webapi.amap.com/theme/v1.3/markers/b/mid.png'
					}),
					offset: new AMap.Pixel(-9, -31)
				},
				lineOptions: {
					// 可缺省
					strokeStyle: 'solid',
					strokeColor: '#FF33FF',
					strokeOpacity: 1,
					strokeWeight: 2
				}
				// 同 RangingTool 的 自定义 设置，缺省为默认样式
			})
			// ruler1.turnOn()
		},
		deletedistance() {
			this.mouseTool.close(true)
		},
		close() {
			// if (document.getElementById('panel')) {
			// 	document.getElementById('panel').innerHTML = ''
			// }
			this.$store.dispatch('app/set_curMapSdk_fun', 'cesium')
			// this.$store.dispatch('app/set_showTools_fun', true)
			// this.$store.dispatch('app/set_showRoadAnalysis_fun', false)
			this.$store.dispatch('app/set_showMeasure_fun', false)
		}
	}
}
</script>
<style lang="scss">
/deep/ .amap-ranging-label {
	// z-index: 99999;
	// background: unset;
	background: pink;
}
</style>
<style lang="scss" scoped>
.roadAnalysis-main {
	position: absolute;
	right: pxTorem(356);
	z-index: 1;
	width: 400px;
	height: 200px;
	bottom: 50px;
	// background: rgba(24, 31, 40, 0.6);
	color: #fff;
	// .amap-marker-label {
	// 	position: absolute;
	// 	z-index: 2;
	// 	border: 1px solid #ccc;
	// 	background-color: pink;
	// 	white-space: nowrap;
	// 	cursor: default;
	// 	padding: 3px;
	// 	font-size: 12px;
	// 	line-height: 14px;
	// }
}
</style>